<div>
  <div class="gn-pager">
    <ul class="pagination">
      <li data-ng-class="config.currentPage == 1 ? 'disabled' : ''">
        <a href="" data-ng-click="first()">
          <i class="fa fa-angle-double-left"></i>
          <span class="sr-only" data-translate="">first</span>
        </a>
      </li>
      <li data-ng-class="config.currentPage == 1 ? 'disabled' : ''">
        <a href="" data-ng-click="previous()">
          <i class="fa fa-angle-left"></i>
          <span class="sr-only" data-translate="">previous</span>
        </a>
      </li>
      <li class="btn-group">
    <!-- A dropdown button to select the number of page
    and indicating the current page info -->
      <a href class="dropdown-toggle"
        data-toggle="dropdown"
        aria-expanded="false">
        <span ng-show="config.pages > 1">
          {{config.from}} - {{config.to}}
          <span translate>resultXonY</span>
          {{config.resultsCount}}
        </span>
        <span ng-show="config.pages <= 1">
          {{config.to}}
          <span translate>results</span>
        </span>
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu" role="menu">
        <li role="presentation"
            class="dropdown-header" data-translate="">hitsPerPage
        </li>
        <li data-ng-repeat="nb in values"
            role="menuitem"
            data-ng-class="nb === config.hitsPerPage ? 'disabled' : ''">
          <a href="" data-ng-click="updateSearch(nb)">{{nb}}</a>
        </li>
      </ul>
    </li>
      <li data-ng-class="config.currentPage == config.pages ? 'disabled' : ''">
        <a href="" data-ng-click="next()">
          <i class="fa fa-angle-right"></i>
          <span class="sr-only" data-translate="">next</span>
        </a>
      </li>
      <li data-ng-class="config.currentPage == config.pages ? 'disabled' : ''">
        <a href="" data-ng-click="last()">
          <i class="fa fa-angle-double-right"></i>
          <span class="sr-only" data-translate="">last</span>
        </a>
      </li>
    </ul>
  </div>
</div>
